import reactLogo from '../assets/react.svg';
import viteLogo from '/vite.svg';
import { incrementByAmount } from '../store/reducer/counter';
import { useAppDispatch, useAppSelector } from '../hooks/useStore';

import '../global.scss';
import { LifeCycle } from './LifeCycle';
import StateSync from './StateSync';
function Home() {
  const count = useAppSelector(state => state.counter.value);
  const dispatch = useAppDispatch();

  return (
    <>
      <div>
        <a href='https://vite.dev' target='_blank'>
          <img src={viteLogo} className='logo' alt='Vite logo' />
        </a>
        <a href='https://react.dev' target='_blank'>
          <img src={reactLogo} className='logo react' alt='React logo' />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className='card'>
        <button onClick={() => dispatch(incrementByAmount(count))}>count is {count}</button>
      </div>
      {/* <LifeCycle></LifeCycle> */}
      <StateSync></StateSync>
    </>
  );
}

export default Home;
